<template>
  <div class="home">
    <van-overlay :show="show" lock-scroll z-index="99">
      <div class="wrapper" @click="isShow">
        <div class="block">
          <img src="../../components/public/img/666.gif" alt />
        </div>
      </div>
    </van-overlay>
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      :color="changeColor"
      text="走过路过不要错过,过来看过来瞧一瞧咯!!!"
      mode="closeable"
    />

    <van-search
      v-model="value"
      shape="round"
      :background="changeColor"
      placeholder="请输入搜索关键词"
      @focus="onFocus"
      readonly
    />
    <van-popup
      v-model="$store.state.popupShow"
      position="right"
      :style="[{ height: '100vh', width: '100%', background: '#efefef' },$store.state.isBug?{overflowY:'hidden'}:{}]"
    >
      <sub-popup></sub-popup>
    </van-popup>

    <banner :gobanner="bannerArr"></banner>
    <list :golist="listArr"></list>
    <four-list :gofourlist="fourlistArr"></four-list>
    <new-product :gonewproduct="newproductArr"></new-product>
    <recommend :gorecommend="recommendArr"></recommend>
    <dissertation :godissertation="dissertationArr"></dissertation>
    <lot-box :golotbox="lotboxArr"></lot-box>
    <div class="null"></div>
  </div>
</template>

<script>
// vh代表视口高度, vw代表视口宽度
import SubPopup from "@/components/subPopup/SubPopup";
import ProductShow from "@/components/ProductShow";

import { GetHome } from "@/request/api";
import Banner from "@/components/home/Banner";
import List from "@/components/home/List";
import FourList from "@/components/home/FourList";
import NewProduct from "@/components/home/NewProduct";
import Recommend from "@/components/home/Recommend";
import Dissertation from "@/components/home/Dissertation";
import LotBox from "@/components/home/LotBox";
import { GetHomeData } from "@/request/api";
import ToRoute from "@/components/home/ToRoute";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      // 轮播图数组
      bannerArr: [],
      // 新品首发
      listArr: [],
      fourlistArr: [],
      newproductArr: [],
      recommendArr: [],
      dissertationArr: [],
      lotboxArr: [],
      changeColor: "",
      show: false
    };
  },
  components: {
    SubPopup,
    Banner,
    ProductShow,
    List,
    FourList,
    NewProduct,
    Recommend,
    Dissertation,
    LotBox,
    ToRoute
  },
  methods: {
    // 遮盖层
    isShow() {
      this.show = !this.show;
    },
    // 聚焦首页搜索框时，打开popup
    onFocus() {
      // console.log(this.$store.state.isClose);
      this.$store.state.isClose = true;
      // 调用mutations中的controlPopupShow
      this.$store.commit("controlPopupShow", true);
      // body.style.overflowY = 'hidden'
      // console.log(body.innerHTML)
      var colorstr = "#";
      var arr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f"
      ];
      for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16);
        colorstr += arr[num];
      }
      this.changeColor = colorstr;
    }
  },
  created() {
    GetHomeData().then(res => {
      if (res.errno == 0) {
        this.bannerArr = res.data.banner;
        this.listArr = res.data.channel;
        this.fourlistArr = res.data.brandList;
        this.newproductArr = res.data.newGoodsList;
        this.recommendArr = res.data.hotGoodsList;
        this.dissertationArr = res.data.topicList;
        this.lotboxArr = res.data.categoryList;
      }
    });

    if (!sessionStorage.getItem("isShow")) {
      this.show = true;
      sessionStorage.setItem("isShow", true);
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  // height: 100%;
  width: 100%;
  background-color: #f4f4f4;

  .null {
    height: 40px;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    overflow: hidden;
    background-color: #fff;
    img {
      width: 100%;
    }
  }
}
header {
  display: flex;
  align-items: center;
}
</style>
